<template>
  <div>
    <a-form
      ref="FormRef"
      :model="FormState"
      :rules="FormRule"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
    >
      <a-form-item label="上级分类" has-feedback required name="pid">
        <a-select v-model:value="FormState.pid" placeholder="请选择分类">
          <a-select-option :key="0">顶级分类</a-select-option>
          <a-select-option
            v-for="d in allCate"
            :key="d.id"
            :value="d.id"
            :disabled="parseInt(FormState.id) == d.id"
          >
            {{ d.title }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="分类名" has-feedback required name="title">
        <a-input v-model:value="FormState.title" placeholder="请输入分类名" />
        <a-input v-model:value="FormState.id" name="id" type="hidden" />
      </a-form-item>
      <a-form-item label="排序" has-feedback required name="sort">
        <a-input-number
          v-model:value="FormState.sort"
          placeholder="请输入序号，大的靠前"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="状态" has-feedback required name="status">
        <a-radio-group v-model:value="FormState.status" name="status">
          <a-radio :key="1" :value="1">正常</a-radio>
          <a-radio :key="-1" :value="-1">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item style="margin-left: 12.5%">
        <a-button type="primary" html-type="submit" :loading="ConfirmLoading" @click="OnSubmit">
          提交
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref, toRaw } from 'vue'
import { Row, Col, InputNumber } from 'ant-design-vue'
import { requestSuccess, requestFailed } from '@/utils/feedback'
import { getCateInfo, editCateInfo, getCateWithLevel } from '@/api/ads'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'ItemEdit',
  components: {
    [Row.name]: Row,
    [InputNumber.name]: InputNumber,
    [Col.name]: Col
  },
  setup() {
    const FormRef = ref()
    const router = useRouter()
    const state = reactive({
      ConfirmLoading: false,
      allCate: [],
      editorData: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    })
    const FormState = reactive({
      pid: 0,
      title: '',
      id: router.currentRoute.value.query.id != undefined ? router.currentRoute.value.query.id : '',
      status: '',
      sort: 0
    })
    const FormRule = {
      pid: [{ required: true, message: '请选择分类', trigger: ['blur', 'change'], type: 'number' }],
      status: [
        { required: true, message: '请选择状态', trigger: ['blur', 'change'], type: 'number' }
      ],
      sort: [
        { required: true, message: '请输入序号', trigger: ['blur', 'change'], type: 'number' }
      ],
      title: [{ required: true, message: '请输入标题', trigger: ['blur', 'change'] }]
    }
    onMounted(() => {
      getCateList()
      getDataInfo()
    })

    function getDataInfo() {
      getCateInfo({ id: FormState.id }).then((res) => {
        for (let item in res) {
          FormState[item] = res[item]
        }
      })
    }
    const getCateList = () => {
      getCateWithLevel({}).then((res) => {
        state.allCate = res
      })
    }
    const OnSubmit = () => {
      FormRef.value
        .validate()
        .then(() => {
          editCateInfo(toRaw(FormState))
            .then((res) => {
              if (res.code === 200) {
                router.go(-1)
                requestSuccess(res)
              } else {
                requestFailed(res)
              }
            })
            .finally(() => {
              state.ConfirmLoading = false
            })
        })
        .catch(() => {
          return false
        })
    }
    return {
      ...toRefs(state),
      FormRef,
      getCateList,
      FormState,
      FormRule,
      OnSubmit,
      getDataInfo
    }
  }
})
</script>

<style scoped></style>
